<template>
	<view>
		
		<view>
			<image :src="activeData.map.background_image" class="imgTitCla"></image>
		</view>
		<view style="width: 750rpx;display: flex;">
			<view class="leftCla">
				<view  class="bothSides">
					<view style="font-size: 32rpx;">￥198</view>
					<view style="background: #FFFFFF;border-radius: 12rpx;width: 112rpx;height: 30rpx;font-size: 22rpx;color: red;text-align: center;margin-top: 10rpx;">已售828件</view>
				</view>
				<view class="bothSides" >
					<view style="min-width: 100rpx;height: 32rpx;border-radius: 5rpx;border: 0.5rpx solid #FFFFFF;font-size: 22rpx;text-align: center;line-height: 32rpx;">限时体验</view>
					<view style="font-size: 22rpx;margin-top: 10rpx;">
						<text>原价</text>
						<text style="text-decoration:line-through;">3550</text>
					</view>
				</view>
			</view>
			<view class="rightCla" @tap="ejectFun">立即购买</view>
		</view>
		
		<view class="textDescri">
			<view class="upper">{{activeData.activity_title}}</view>
			<view class="lower">{{activeData.activity_description}}</view>
		</view>
		<view class="poster">
			<view class="posterCla">
				<image :src="posterImg" @tap="goPoster" style="width: 196rpx;height: 74rpx;margin: 20rpx 0 0 500rpx;"></image>
			</view>
		</view>
		
		
		<view class="prosonNum">
			当前参与活动人数
			<text style="color: #FFFFFF;">[ {{num}} ]</text>
			人 
		</view>
		
		<view class="titleCla">
			活动正在进行中
		</view>
		
		<view class="prosonNum" >
			<view>已有</view>
			<view  class="flexCla">
				<view v-for="(itme,index) in numData" :key="index" class="numStyCla">{{itme}}</view>
			</view>
			<view>人参加</view>
		</view>
		
		<view class="numOfPeo">
			<view v-for="(itme,index) in teacherListData" :key="index" style="margin-left: 30rpx;" class="publicCla">
				<view>
					<image :src="itme.photo" style="width: 152rpx;height: 152rpx;border-radius: 50%;"></image>
				</view>
				<view style="color: rgba(255, 255, 255, 1);font-size: 28rpx;">{{itme.full_name}}</view>
			</view>
		</view>
		
		<view class="prosonNum" style="margin: 0;">
			支付198抢名额
		</view>
		
		<view style="position: relative;text-align: center;">
			<image :src="RedEnveImg" style="width: 750rpx;" mode="widthFix"></image>
			<button data-name="shareBtn" open-type="share" style="position: absolute;width: 750rpx;height: 200rpx;top: 700rpx;left: 0;background: transparent;border: none;z-index: 121212121;" plain="true"></button>
			<image :src="RankingImg" style="width: 720rpx;height: 138rpx;"></image>
			<view class="publicCla">
				<view style="font-size: 44rpx;font-weight: bold;">总排行榜</view>
				<view style="height: 10rpx;width: 100rpx;background: rgba(239, 78, 49, 1);margin-top: 20rpx;"></view>
			</view>
		</view>
		
		<!-- 当下拉到一定位置 在渲染 -->
		<view>
			 <view style="display: flex;flex-direction: column;background: #FFFFFF;margin-top: 10rpx;padding-bottom: 20rpx;" >
				 <scroll-view style="max-height: 600rpx;" scroll-y="true" @scrolltolower="scrolltolower">
					 <view  v-for="(itme,index) in list" :key="index" :class="index%2 == 0 ? 'grad' : 'gradd' ">
						<view v-if="index < 3">
							<image :src="index == 0 ? champion : index == 1 ? SecondImg : runnerUp " style="width: 62rpx;height: 96rpx;"></image>
						</view>
						<view style="font-size: 44rpx;font-weight: bold;color: rgba(239, 78, 49, 1);width: 62rpx;height: 96rpx;text-align: center;line-height: 96rpx;" v-if="index >= 3">{{index + 1}}</view>
						<view style="margin-left: 20rpx;">
							<image :src="itme.pic" style="height: 86rpx;width: 86rpx;border-radius: 50%;"></image>
						</view>
						<view class="personalCla" style="margin-left: 10rpx;">{{itme.nickName}}</view>
						<view class="personalCla" style="margin-left: 120rpx;">{{itme.invite_count}}人</view>
						<view class="personalCla" style="margin-left: 40rpx;">{{itme.invite_earn}}元</view>
					 </view>
				 </scroll-view>
			 </view>
			 
			<view class="curricCon" v-for="(itme,indexs) in activeData.map.mechanismList" :key="indexs" >
				<view class="titleImgCla">
					<view>
						<image :src="itme.mechanism_logo" class="imgCla"></image>
					</view>
					<view  class="fontsize" style="font-weight: bold;margin-left: 10rpx;">{{itme.mechanism_name}}</view>
				</view>
				<view class="mechanCla">
					<view class="mechancontent">
						<p>{{itme.introduction_content}}</p>
					</view>
				</view>
				<view class="studCla">学员风采</view>
				<view class="imgCont" style="flex-wrap: wrap ;" v-if="itme.newStudents.length !== 0" >
					<view v-for="(itme,index) in itme.newStudents" :key="index">
						<image :src="itme" class="fenImg"></image>
					</view>
				</view>
				<view class="studCla">校区环境</view>
				<view class="imgCont" style="flex-wrap: wrap ;" v-if="itme.newEnvironment.length !== 0">
					<view v-for="(itme,index) in itme.newEnvironment" :key="index">
						<image :src="itme" class="fenImg"></image>
					</view>
				</view>
				<view class="shareCla" v-if="itme.map.courseList.length != 0">
					<view v-for="(ite,ind) in itme.map.courseList" :key="ind" style="display: flex;justify-content: space-between;color: #000000;font-size: 26rpx;box-sizing: border-box;padding: 0 25rpx;height: 50rpx;line-height: 50rpx;">
						<text>{{ite.title}}</text>
						<text>({{ite.apply_age}})</text>
						<text>{{ite.course_num}}课时</text>
						<text>{{ite.length_of_lesson}}分钟</text>
					</view>
				</view>
				<view class="imgCont" style="margin-top: 65rpx;color: #FFFFFF;font-size: 26rpx;">
					<view>
						<view>
							<text>联系人：</text>
							<text>12</text>
						</view>
						<view>
							<text>电话：</text>
							<text>{{itme.contact_telephone}}</text>
						</view>
						<view>
							<text>地址：</text>
							<text>{{itme.mechanism_addr}}</text>
						</view>
					</view>
					<view>
						<image :src="itme.facade_view" style="width: 120rpx;height: 120rpx;"></image>
					</view>
				</view>
			</view>
			 <!-- <view class="giftCla">
				 <view class="giftBox" v-for="(itme,index) in giftData" :key="index">
					 
					 <text class="cozyCla">《礼品 {{index ==  0 ? '一' : index == 1 ? "二" : index == 2 ? "三" : index == 3 ? '四' : index == 4 ? "五" : '六'}}》</text>
					 <image :src="itme.pic" style="width: 438rpx;height: 438rpx;margin-top: 20rpx;border: 0.5rpx solid #2EEA9D;border-radius: 10rpx;"></image>
				 </view>
			 </view> -->
			 <view class="goodManCla">
				 <view class="titImgCla">
					 好礼相赠
				 </view>
				 <view>
					 
					 <view v-for="(itme,index) in giftData" :key="index" class="upConCla">
						 <image :src=" index === 0 ? oneImg : index == 1 ? twoImg : index == 2 ? threeImg : '' " style="width: 92rpx;height: 92rpx;position: absolute;top: 0;left: 0;"></image>
						 <view>
							<image :src="itme.pic" style="width: 250rpx;height: 160rpx;"></image>
						 </view>
						 <view style="height: 160rpx;margin-left: 22rpx;display: flex;flex-direction: column;justify-content: space-between;">
							<view style="font-size: 31rpx;color: #010101;">{{itme.gift_name}}</view> 
							<view style="font-size: 24rpx;color: #9E9E9E;">{{itme.introduction}}</view> 
							<view style="width: 123rpx;height: 54rpx;background: #FDE9D4;text-align: center;line-height: 54rpx;color: #D24217;font-size: 28rpx;">￥{{itme.discount_amout}}</view> 
						 </view>
					 </view>
				 </view>
			 </view>
			 <view class="TipsContent">
				 <view class="cozyCla">温馨提示</view>
				 <p>1.凡购买体验课以上礼品即可三选一，不可兑换现金，送完为止，不退不换。</p>
				 <p>2.凡是现场参与活动家长，也可以有几率进行抽取大奖，先到先得，为您的孩子助力加油。</p>
				 <p>3.购买课程后一年有效，礼品请在指定地点兑换，一个星期内兑换有效，过期作废。</p>
				 <p>4.本次活动最终解释权归教付保所有！</p>
			 </view>
			 
			 <view class="curricCon" >
			 	<view class="titleImgCla" >
			 		<!-- <view>
			 			<image :src="activeData." class="imgCla"></image>
			 		</view> -->
			 		<view  class="fontsize" style="font-weight: bold;margin-left: 10rpx;">{{activeData.sponsors_name}}</view>
			 	</view>
			 	<view class="mechanCla">
			 		<view class="mechancontent">
			 			<p>{{activeData.statement}}</p>
			 		</view>
			 	</view>
			 	<view class="imgCont" style="flex-wrap: wrap;margin-top: 20rpx ;">
			 		<view v-for="(itme,index) in activeData.newSponsors_pic" :key="index">
			 			<image :src="itme" class="fenImg"></image>
			 		</view>
			 	</view>
			 	<view class="imgCont" style="margin-top: 65rpx;color: #FFFFFF;font-size: 26rpx;">
			 		<view>
			 			<view>
			 				<text>联系人：</text>
			 				<text>12</text>
			 			</view>
			 			<view>
			 				<text>电话：</text>
			 				<text>{{activeData.sponsors_phone}}</text>
			 			</view>
			 			<view>
			 				<text>地址：</text>
			 				<text>{{activeData.sponsors_addr}}</text>
			 			</view>
			 		</view>
			 		<view>
			 			<image :src="activeData.sponsors_qrcode" style="width: 120rpx;height: 120rpx;"></image>
			 		</view>
			 	</view>
			 </view>
			 
			 <view style="" class="publicCla">
				 <image :src="activeTit" style="width: 100vw;height: 90rpx;"></image>
				 <view style="width: 100vw;height: 662rpx;position: relative;">
					<!-- <view class="comtent">
						 
					 </view> -->
					<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" show-location :markers="covers" enable-traffic show-compass @markertap="markertap"></map> 
				 </view>
			 </view>
			 
			 <view>
				 <button type="primary" style="width: 690rpx;height: 90rpx;margin: 30rpx 0 0 30rpx;background: rgba(255, 2, 3, 1);border-radius: 42rpx;line-height: 90rpx;font-size: 28rpx;" @tap="openMapFun" >一键导航</button>
			 </view>
			 <view class="grad" style="background: transparent;display: flex;align-items: center;justify-content: space-between;">
				 <view @tap="dialFun">
					 <image :src="customeImg" style="width: 48rpx;height: 48rpx;"></image>
					 <view style="font-size: 25rpx;">客服</view>
				 </view>
				 <view>
					 <button type="primary" class="bntCla" @tap="ejectFun">立即抢购</button>
				 </view>
			 </view>
		 </view>
		<van-popup :show="canShow" position="bottom" round @before-enter="beforeEnter" @click-overlay="overlay">
			
			<!-- <view style="width: 750rpx;height: 714rpx;position: relative;">
				<image :src="cancelImg" style="position: absolute;top: 30rpx; left: 670rpx;width: 50rpx;height: 50rpx;" @tap="cancelFun"></image>
				<view style="display: flex;width: cala(100vw * 0.92);align-items: center;position: absolute;top: 5rpx;margin-left: calc(100vw * 0.04);top: 20rpx;">
					<view :class="checkData ? 'oLdCla_' : 'oLdCla'" @tap="nocheckFun">
						以后再选
					</view>
					<view :class="addData ? 'oLdCladd_' : 'oLdCladd'" style="margin-left: 32rpx;" @tap="addoneFun">
						加100，加一科
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: 450rpx;position: absolute;left: 45rpx;top: 100rpx;">
					<view style="display: flex;flex-wrap: wrap;">
						<view v-for="(itme,index) in arr" :key="index" :class="itme.list ? 'content' : 'content_l' " @tap="choiceFun(itme)">{{itme.title}}</view>
					</view>
				</scroll-view>
				<view style="position: absolute;top: 570rpx;left: 30rpx;">
					<button type="primary" style="background: rgba(255, 117, 1, 1);border-radius: 40rpx;width: 690rpx;" @tap="purchaseCurr">{{numderData}}立即购买</button>
				</view>
			</view> -->
			<choiceCur @hideFun="hideFun" :shareId="shareId"></choiceCur>
		</van-popup>
	</view>
</template>
<script>
	import choiceCur from '../../jigou/choiceCur'
	export default {
		components:{
			choiceCur
		},
		// 微信小程序分享功能 
		onShareAppMessage(res) {
			let obj = {}
			if(this.user_id == "") {
				uni.showToast({
					title: "你还未登录，分享无现金返还,登陆后再次分享",
					icon: "none",
					duration: 5000
				})
				// 未登录不能分享  没有用户id 分享没有啥意义
				uni.navigateTo({
					url: "/pages/tabBer/login/logins?excellent=" + this.shareId
				})
				obj = {}
			}else {
				obj = {
					title: '优学卡分享',
					path: "/pages/Other/shaixuan/shaixuan?invite_code=" + this.invite_code
				}
			}
			return obj
		},
		
		data() {
			return {
				ma: "https://alicliimg.clewm.net/weapp/2021/04/14/788a926944c605bef85213981d05af3e1618407335.jpeg",
				img: "http://img.curiousmore.com/114357232669",
				user_id: "",
				canShow: false,
				posterImg: "http://img.curiousmore.com/319839741696",
				cancelImg: "http://img.curiousmore.com/8735092929",
				arr: [],
				electData: [],
				numData: [],
				teacherListData: [],
				num: 2886,
				RedEnveImg: "http://img.curiousmore.com/570860077250",
				RankingImg: "http://img.curiousmore.com/99699295014",
				list: [],
				champion: "http://img.curiousmore.com/414218249220",
				SecondImg: "http://img.curiousmore.com/91594928880",
				runnerUp: "http://img.curiousmore.com/388205228100",
				activeTit: "http://img.curiousmore.com/699310304276",
				latitude: 30.269508192274305,
				longitude: 120.22748643663195,
				covers: [{
					id: 12,
					latitude: 30.269508192274305,
					longitude: 120.22748643663195,
					iconPath: '../../../static/ll.png',
					width: 20,
					height: 25,
					callout: {
						content: "优学卡活动地址",
						bgColor: "#ffffff",
						padding: 20,
						display: "'BYCLICK'",
						textAlign: "center",
						color: "#FFAB52"
					},
					label: {
						content: "杭州汇合公司",
						color: "red",
						fontSize: "30rpx",
						borderWidth: 2,
						borderRadius: 10,
						padding: 20,
						bgColor: "#ffffff"
					}
					
				}],
				customeImg: "http://img.curiousmore.com/30102639820",
				invite_code: "",
				shareId: "",
				isShow: false,
				currentPage: 1,
				tolower: 1,
				hellow: "",
				giftData: [],
				picPho: "http://img.curiousmore.com/250948059600",
				img_: ["http://img.curiousmore.com/250948059600","http://img.curiousmore.com/250948059600"],
				goodMan: "http://img.curiousmore.com/63656795664",
				oneImg: "http://img.curiousmore.com/94895031643",
				twoImg: "http://img.curiousmore.com/73802025190",
				threeImg: "http://img.curiousmore.com/86176091484",
				activeData: [],
				ejectContent: "http://img.curiousmore.com/720708700712",
				checkData: false,
				addData: false,
				numderData: 298
				
			}
		},
		
		methods: {
			
			// 子元素传参
			hideFun(index) {
				this.canShow = false
			},
				
				
			
			
			// 活动请求函数
			newData() {
				this.$myRequest({
					url: "/businessMechanismActivityType/queryActivityDetail",
					data: {
						id: 12
					}
				}).then((res) => {
					// res.data.latitude = 30.245853
					// res.data.longitude = 120.209947
					res.data.map.mechanismList.forEach((val) => {
					   if(val.mechanism_name.length > 5) {
						   val.mechanism_name = val.mechanism_name.substring(0,6)
					   }
					   if(val.environment_pic) {
						   val.newEnvironment = val.environment_pic.split(",")
					   }else {
						   val.newEnvironment = []
					   }
					   if(val.students_pic) {
						   val.newStudents = val.students_pic.split(",")
					   }else {
						   val.newStudents = []
					   }
					})
					if(res.data.sponsors_pic) {
						res.data.newSponsors_pic = res.data.sponsors_pic.split(",")
					}
					this.activeData = res.data
					this.covers[0].latitude = res.data.latitude
					this.covers[0].longitude = res.data.longitude
					this.latitude = res.data.latitude
					this.longitude = res.data.longitude
					this.covers[0].label.content = res.data.activity_address
				})
			},
			
			// 礼物请求
			giftFun() {
				this.$myRequest({
					url: "/userGift/queryListPage",
					data: {
						pageSize: 10,
						currentPage: 1,
						status: 3,
						// activity_id: 11
					}
				}).then((res) => {
					this.giftData = res.data
				})
			},
			
			// 购买人数请求
			purchperFun() {
				this.$myRequest({
					url: "/rechargerecord/queryListPageCount",
					data: {
						rcharge_type: "coupon_198",
						finished: true
					}
				}).then((res) => {
					this.num = res.data*2 + 2000
					this.fun()
				})
			},
			
			// 排行榜下拉触发函数事件
			scrolltolower() {
				if(this.tolower == 1) {
					this.currentPage++
					this.RankFun()
				}
			},
			
			// 拨打电话函数
			dialFun() {
				uni.makePhoneCall({
				    phoneNumber: '18806714904' 
				});
			},
			
			// 点击内置点函数
			markertap(e) {
				// 获取数组对象的id 遍历数组 可以获取其中经纬度
				// console.log(e.mp.markerId)
			},
			
			// 打开地图
			openMapFun() {
				uni.openLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					address: "杭州汇合科技",
					success: function () {
						console.log('success');
					}
				});
			},
			
			fun() {
				let numStr = String(this.num)
				let a = []
				for(let i = 0;i<numStr.length;i++) {
					a.push(numStr[i])
				}
				this.numData = a
			},
			
			cancelFun() {
				this.canShow = false
				this.electData = []
			},
			
			// 跳转海报
			goPoster() {
				uni.navigateTo({
					url: "/pages/Other/setPass/setPass"
				})
			},
			
			ejectFun() {
				this.canShow = true
			},
			
			// 课程列表请求
			curriculumList() {
				this.$myRequest({
					url: "/masterSetPrice/queryListPage",
					data: {
						type: "double_science_Activity",
						pageSize: 10,
						currentPage: 1
					}
				}).then((res) => {
					this.arr = res.data
				})
			},
			
			// 参见活动的参与者请求
			queryTeacherListRequest() {
				this.$myRequest({
					url: "/masterInfo/queryTeachPayByEs",
					data: {
						type: "teach_paypal",
						pageSize: 10,
						currentPage: 1,
						status: 2
					}
				}).then((res) => {
					this.teacherListData = res.data
				})
			},
			
			// 排行榜数据
			RankFun() {
				this.$myRequest({
					url: "/userRecommenderIncomeLog/queryRanking",
					data: {
						pageSize: 10,
						currentPage: this.currentPage,
						type: "invite_coupon"
					}
				}).then((res) => {
					res.data.forEach((val) => {
						if(val.nickName.length > 6) {
							val.nickName = val.nickName.substring(0,6)
						}
					})
					if(res.data.length < 10) {
						this.tolower = 2
					}else {
						this.tolower = 1
					}
					if(this.list.length == 0) {
						this.list = res.data
					}else {
						this.list = this.list.concat(res.data)
					}
				})
			}
		},
		
		// 监听下拉的函数
		onPageScroll(e) {
			if(e.scrollTop > 100) {
				this.isShow = true
			}
		},
		
		onLoad(option) {
			let me = this
			me.giftFun()
			// 扫码进入小程序获取的参数
			if(option.scene) {
				let scene = decodeURIComponent(option.scene)
				me.shareId = scene
			}
			if(option.invite_code) {
				me.shareId = option.invite_code
			}
			if(option.excellent) {
				me.shareId = option.excellent
			}
			try{
				if(uni.getStorageSync('userif_list')){
					me.user_id = uni.getStorageSync('userif_list').user_id
					me.invite_code = uni.getStorageSync('userif_list').invite_code
				}
			}catch(e){}
			me.queryTeacherListRequest()
			me.RankFun()
			me.purchperFun()
			me.newData()
			if(me.user_id == "") {
				uni.showModal({
				    title: '登录提示',
				    content: '请先登录',
				    success: function (res) {
				        if (res.confirm) {
				            uni.navigateTo({
				            	url: "/pages/tabBer/login/logins?excellent=" + me.shareId
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.oLdCla {
		width: 280rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		background: #F6F6F6;
		color: #666666;
		font-size: 28rpx;
		border-radius: 10rpx;
	}
	.oLdCla_ {
		width: 280rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		background: #FF7501;
		color: #FFFFFF;
		font-size: 28rpx;
		border-radius: 10rpx;
	}
	.oLdCladd {
		width: 280rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		background: #F6F6F6;
		color: #666666;
		font-size: 28rpx;
		border-radius: 32rpx;
	}
	.oLdCladd_ {
		width: 280rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		background: #FF7501;
		color: #FFFFFF;
		font-size: 28rpx;
		border-radius: 32rpx;
	}
	.comtent {
		width: calc(100vw * 0.75);
		height: calc(100vw * 0.51);
		background-image: url("http://img.curiousmore.com/720708700712");
		background-size: cover ;
		position: absolute;
		left: 0;
		right: 0;
		margin: 0;
		z-index: 121221;
	}
	.upConCla {
		width: calc(100vw * 0.82);
		height: calc(100vw * 0.32);
		background: #FFFFFF;
		border-radius: 15rpx;
		display: flex;
		// justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 40rpx;
		margin-top: 40rpx;
		position: relative;
	}
	.goodManCla {
		width: 100vw;
		min-height: 100rpx;
		position: relative;
		background: #F94840;
		padding-bottom: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 40rpx;
		.titImgCla {
			width: 468rpx;
			height: 122rpx;
			background-image: url("http://img.curiousmore.com/63656795664");
			background-size: cover;
			position: relative;
			top: -25rpx;
			text-align: center;
			line-height: 122rpx;
			font-size: 50rpx;
			font-weight: bold;
			color: #FFFFFF;
			letter-spacing: 2rpx;
		}
	}
	.shareCla{
		width: 630rpx;
		border: 30rpx solid rgb(228,173,168);
		min-height:100rpx ;
		background: #FFFFFF;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
	}
	.studCla {
		font-size: 50rpx;
		color: #FFFFFF;
		font-weight: bold;
		margin: 30rpx 0;
	}
	.imgCont {
		width: 690rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.fenImg {
			width: 340rpx;
			height: 202rpx;
		}
	}
	.imgCla {
		width: 182rpx;
		height: 76rpx;
		border-radius: 22rpx;
		
	}
	.bntCla {
		width: 258rpx;
		height: 76rpx;
		line-height: 76rpx;
		background-image: linear-gradient(to right, rgba(254, 179, 21, 1) , rgba(255, 117, 1, 1));
		border-radius: 12rpx;
		font-size: 40rpx;
	}
	.cozyCla {
		color: rgba(239, 78, 49, 1);
		font-weight: bold;
		font-size: 48rpx;
		text-align: center;
		width: 100%;
	}
	.TipsContent {
		background: #FFFFFF;
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx;
		// text-align: center;
		font-size: 26rpx;
		
	}
	.giftCla {
		width: 750rpx;
		box-sizing: border-box;
		background: rgba(255, 2, 3, 1);
		padding: 28rpx;
		.giftBox {
			width: 692rpx;
			height: 668rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 46rpx;
			margin-top: 20rpx;
			padding: 100rpx 128rpx;
			box-sizing: border-box;
			text-align: center;
			display: flex;
			flex-direction: column;
		}
	}
	.personalCla {
		font-size: 32rpx;
		font-weight: bold;
		color: rgba(239, 78, 49, 1);
		
	}
	.grad {
	  background-image: linear-gradient(to right, rgba(245, 245, 243, 1) , rgba(242, 239, 146, 1));
	  width: 690rpx;
	  height: 148rpx;
	  border-radius: 24rpx;
	  margin: 30rpx 0 0 30rpx;
	  display: flex;
	  align-items: center;
	  box-sizing: border-box;
	  padding: 27rpx;
	}
	.gradd {
		background-image: linear-gradient(to left, rgba(245, 245, 243, 1) , rgba(242, 239, 146, 1));
		width: 690rpx;
		height: 148rpx;
		border-radius: 24rpx;
		margin: 30rpx 0 0 30rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 27rpx;
	}
	.publicCla {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.numOfPeo {
		background:url(http://img.curiousmore.com/38626984575);
		background-size:cover;
		width: 750rpx;
		height: 906rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.flexCla {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.titleCla {
		color: #000000;
		width: 750rpx;
		height: 110rpx;
		line-height: 110rpx;
		text-align: center;
		font-weight: bold;
		background: #FFFFFF;
		font-size: 45rpx;
	}
	.prosonNum {
		width: 750rpx;
		height: 120rpx;
		background: rgba(249, 72, 64, 1);
		line-height: 110rpx;
		text-align: center;
		color: #000000;
		font-size: 44rpx;
		// margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.numStyCla {
			width: 60rpx;
			height: 101rpx;
			background: #000000;
			color: rgba(249, 72, 64, 1);
			text-align: center;
			line-height: 101rpx;
			border-radius: 16rpx;
			margin-left: 10rpx;
		}
	}
	.content {
		border: 1rpx solid rgba(255, 117, 1, 1);
		width: 200rpx;
		height: 64rpx;
		margin:46rpx 30rpx 0 0;
		border-radius: 10rpx;
		line-height: 64rpx;
		text-align: center;
		font-size: 30rpx;
		color: rgba(255, 117, 1, 1);
	}
	.content_l {
		border: 1rpx solid rgba(246, 246, 246, 1);
		width: 200rpx;
		height: 64rpx;
		margin:46rpx 30rpx 0 0;
		border-radius: 10rpx;
		line-height: 64rpx;
		text-align: center;
		font-size: 30rpx;
		color: rgba(102, 102, 102, 1);
		background: rgba(246, 246, 246, 1);
	}
	.poster {
		width: 750rpx;
		height: 116rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		.posterCla {
			width: 690rpx;
			height: 116rpx;
			background: rgba(238, 238, 238, 1);
			border-radius: 10rpx;
		}
	}
	.textDescri {
		width: 750rpx;
		padding: 20rpx;
		box-sizing: border-box;
		.upper {
			font-size: 32rpx;
			font-weight: bold;
		}
		.lower {
			font-size: 22rpx;
			color: rgba(102, 102, 102, 1);
			margin-top: 10rpx;
		}
	}
	*{
		margin: 0;
		padding: 0;
	}
	.imgTitCla {
		width: 750rpx;
		height: 440rpx;
		vertical-align: middle;
	}
	.leftCla {
		display: flex;
		background: rgba(249, 72, 64, 1);
		width: 375rpx;
		height: 112rpx;
		color: #FFFFFF;
		box-sizing: border-box;
		padding: 10rpx;
		.bothSides {
			width: 187.5rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}
	.rightCla {
		background: rgba(246, 217, 123, 1);
		width: 375rpx;
		color: rgba(249, 72, 64, 1);
		height: 112rpx;
		line-height: 112rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.curricCon {
		width: 100vw;
		// min-height: 1814rpx;
		background-image: url("http://img.curiousmore.com/96594869344");
		background-size:cover;
		margin: 20rpx 0;
		padding: 0;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		box-sizing: border-box;
		padding: 26rpx;
		
		.titleImgCla {
			display: flex;
			align-items: center;
			text-align: center;
		}
		.fontsize {
			font-size: 62rpx;
			color: #FFFFFF;
			
		}
		
	}
	.mechanCla {
		width: 680rpx;
		border-top: 30rpx solid rgb(242,31,70);
		border-radius: 5rpx;
		display: flex;
		justify-content: center;
		margin-top: 10rpx;
		.mechancontent {
			width: 600rpx;
			position: relative;
			top: -10rpx;
			// min-height: 100rpx ;
			// box-sizing: border-box;
			background: #FFFFFF;
			display: flex;
			justify-content: center;
			border-radius: 0 0rpx 25rpx 25rpx;
			padding: 20rpx;
			font-size: 26rpx;
		}
	}
</style>